Walkthrough

This PR extends the branding context with customizable chart accent color support. A new useChartColors hook provides memoized chart color tokens derived from branding and theme contexts, replacing hardcoded values in chart components.

Changes

Sequence Diagram

sequenceDiagram
    participant Comp as Chart Component<br/>(StatusPage/TokenDetailPage)
    participant Hook as useChartColors Hook
    participant BrandCtx as BrandingContext
    participant ThemeCtx as ThemeContext
    participant CSS as CSS Variables<br/>(getComputedStyle)
    
    Comp->>Hook: invoke useChartColors()
    Hook->>BrandCtx: read accentHex
    Hook->>ThemeCtx: read theme (default 'dark')
    Hook->>CSS: getComputedStyle(documentElement)
    CSS-->>Hook: grid, axisText, tooltipBg, tooltipText values
    Hook-->>Comp: {accent, grid, axisText, tooltipBg, tooltipText}
    Comp->>Comp: apply colors to Recharts components

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• feat: theme-specific white-label logos #48: Modifies branding resolution logic (resolveBrandingValue) to add theme-aware branding fields, addressing similar extensibility in the branding system.

Suggested reviewers

• tac0turtle

Poem

🐰 A colorful garden of charts takes shape,
With accent hues crafted from config's cape,
No hardcoding now—just hooks and a theme,
Making dashboards shimmer in every bright beam! ✨

❌ Failed checks (1 warning)

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

• X
• Mastodon
• Reddit
• LinkedIn